<template>
  <div id="remoteUpdate">
    <div class="remoteContent">
      <div class="infoTop">
        <p class="remoteTitle">内存实时数据清单</p>
        <div class="searchBox">
          <el-input class="leftInput" v-model="toSearch" placeholder="搜索"></el-input>
          <!--<i @click="requestReal()" class="el-icon-search search"></i>-->
          <el-button type="primary" @click="requestReal()">查询</el-button>
          <el-button v-if="!this.intervalObj" type="primary" @click="timingRequestReal()">开启定时查询</el-button>
          <el-button v-if="this.intervalObj" type="primary" @click="timingRequestReal()" class="closebutton">关闭定时查询</el-button>
        </div>
      </div>
      <div class="nav">
        <el-table
          class="dataTable"
          :data="tableData"
          border
          height="799"
          :stripe="true"
          style="width: 100%">
          <el-table-column
            prop="id"
            sortable
            label="唯一识别号"
            width="303">
          </el-table-column>
          <el-table-column
            prop="equip_name"
            label="设备名称"
            sortable
            width="200">
          </el-table-column>
          <el-table-column
            prop="name"
            label="测点名称"
            sortable
            width="200">
          </el-table-column>
          <el-table-column
            prop="dtype"
            label="数据类型"
            sortable
            width="120">
          </el-table-column>
          <el-table-column
            prop="value1"
            label="显示数据"
            sortable
            width="120">
          </el-table-column>
          <el-table-column
            prop="value2"
            label="原始数据"
            sortable
            width="120">
          </el-table-column>
          <el-table-column
            prop="value3"
            label="状态"
            sortable
            width="120">
          </el-table-column>
          <el-table-column
            prop="occurrence_time"
            label="更新时间"
            sortable
            width="200">
          </el-table-column>
          <el-table-column
            prop="SaveTime"
            label="存储时间"
            sortable
            width="200">
          </el-table-column>
          <el-table-column
            prop="Unit"
            label="单位"
            sortable
            width="100">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'remoteUpdateIndex',
    components: {
    },
    data() {
      return {
        tableData: [],
        toSearch: '',
        intervalObj: '',
        getRealDataBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'actual_real',
          pid: localStorage.getItem('num'),
          datas: []
        }
      }
    },
    methods: {
      requestReal() {
        clearInterval(this.intervalObj)
        this.intervalObj = ''
        this.getRealDataBody.datas.push(this.toSearch)
        axios.post('/data', this.getRealDataBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.getRealDataBody.datas = []
          this.tableData = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      timingRequestReal() {
        if (this.intervalObj) {
          clearInterval(this.intervalObj)
          this.getRealDataBody.datas = []
          this.intervalObj = ''
        } else {
          this.getRealDataBody.datas.push(this.toSearch)
          this.A()
        }
      },
      A: function() {
        this.intervalObj = setInterval(() => {
          axios.post('/data', this.getRealDataBody, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.tableData = res.data.datas
          })
            .catch(function(error) {
              console.log(error)
            })
        }, 1000)
      }
    },
    destroyed: function() {
      clearInterval(this.intervalObj)
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #remoteUpdate{
    width: 100%;
    min-height: 48vw;
    background-color: #fff;
    .remoteContent{
      width: 100%;
      min-height: 48vw;
      background-color: #fff;
      padding: 20px;
      .infoTop{
        width: 100%;
        height: 40px;
        .searchBox {
          float: right;
          height: 30px;
          line-height: 30px;
          margin-bottom: 10px;
          /deep/ .el-button--primary {
            height: 30px;
            font-size: 14px;
            padding: 6px 16px;
            background: #25B6C7;
            border-color: #25B6C7;
            margin-left: 10px;
          }
          .leftInput {
            height: 30px;
            line-height: 30px;
            width: 400px;
            /deep/ .el-input__inner {
              height: 30px;
            }
          }
          .closebutton {
            background:#0F1516;
            border:1px solid #0F1516;
          }
          .search {
            position: absolute;
            top: 27px;
            margin-left: -25px;
            cursor: pointer;
            font-size: 14px;
          }
        }
        .line{
          font-size: 16px;
          color: #25B7C8;
          font-weight: bold;
        }
        .remoteTitle{
          text-align: center;
          margin-top: 5px;
          font-size: 24px;
          color: #676A70;
          padding-left: 5px;
          height: 16px;
        }
      }
      .nav{
        width: 100%;
        .dataTable {
          overflow: auto;
          height: 799px;
        }
        /deep/ .el-table td {
          padding: 6px 0;
        }
      }
    }
  }
</style>
